<template>
  <div>
    <el-dialog
      title="工单施工"
      :visible.sync="visible"
      width="50%"
      :before-close="handleClose"
    >
      <div id="loading-wrap" style="padding: 0 24px;">
        <el-descriptions border :column="2">
          <el-descriptions-item label="GPS安装">{{ info.label1 }}</el-descriptions-item>
          <el-descriptions-item label="抵押登记">{{ info.label2 }}</el-descriptions-item>
          <!-- <el-descriptions-item label="补充资料">
            <el-image
              v-for="(item, index) in info.supplement"
              :key="index"
              style="width: 100px; height: 100px"
              :src="item"
              :preview-src-list="info.supplement"
            />
          </el-descriptions-item> -->
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
// import imageBox from './imageBox.vue'
// import VideoBox from '@/components/VideoBox/index'
export default {
  components: {
    // imageBox,
    // VideoBox
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeName: 'first',
      loadingState: {},
      info: {}
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          setTimeout(() => {
            this.getInfo(this.id)
            this.openFullScreen2()
          }, 500)
        } else {
          this.info = {}
        }
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },

    handleClose() {
      this.$emit('handleClose')
    },
    getInfo(id) {
      request({ url: 'system/funds/' + id, method: 'get' }).then(res => {
        if (res.data) {
          this.info = {
            ...res.data,
            supplement: res.data.supplement.split(',')
          }
        }
      }).finally(() => {
        this.loadingState.close()
      })
    },
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        target: '#loading-wrap'
      })
      this.loadingState = loading
    }
  }
}
</script>

<style scoped>
.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: rgb(246, 247, 250);
}

.box-card {
  margin-bottom: 30px;
}

.images {
  display: flex;
  gap: 30px
}
</style>
